<template>
	<view class="page">
		<navigation textColor="#333333" barColor="#333333" defaultButton="back">意见反馈</navigation>
		<view class="title">问题类型</view>
		<view class="select_panel">
			<view class="item" v-for="(item, index) in selectList" :key="index" @tap="statusChange(index, item.isActive)" :class="{ active: item.isActive }">{{ item.label }}</view>
		</view>
		<view class="title">请描述问题</view>
		<view class="idea_panel"><textarea class="idea" v-model="model.content" placeholder="写其他意见和建议" /></view>
		<button class="page_btn" hover-class="page_btn-hover" @tap="submit">确认提交</button>
	</view>
</template>

<script>
import * as modelApi from '@/api/userApi/model.js';
export default {
	data() {
		return {
			selectList: [{
					isActive: false,
					label: 'BUG'
				},
				{
					isActive: false,
					label: '投诉'
				},
				{
					isActive: false,
					label: '建议'
				},
				{
					isActive: false,
					label: '其他'
				}
			],
			model: {
				type:'',
				content: ''
			}
		}
	},
	methods: {
		statusChange(index, status) {
			this.selectList.map(item=>{
				item.isActive = false;
			})
			this.$set(this.selectList[index], "isActive", true);
			this.$set(this.model, "type", this.selectList[index].label);
		},
		submit() {
			modelApi.addQuestion(this.model).then(res => {
				if (res.code == 0) {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						duration: 1500
					});
					setTimeout(()=>{
						uni.navigateBack();
					},1500)
				}
			}).catch((e)=>{
				uni.showToast({
					title: e.msg,
					icon: 'none',
					duration: 1000
				});
			});
		}
	}
}
</script>

<style lang="stylus" scoped>
.title
	margin-top 50rpx
	font-size 36rpx
	font-family PingFang SC
	font-weight 400
	color #333333
	padding 0rpx 30rpx
	box-sizing border-box
.select_panel
	margin-top 35rpx
	padding 0rpx 30rpx
	box-sizing border-box
	display flex
	flex-wrap wrap
	.item
		font-size 28rpx
		font-family PingFang SC
		font-weight 400
		color #666666
		background #ECECEC
		padding 8rpx 30rpx
		box-sizing border-box
		margin-right 40rpx
		border-radius 25rpx
	.active
		color #FFFFFF
		background-color rgba(251, 123, 34, 1)
.idea_panel
	width 100%
	margin-top 30rpx
	padding 0rpx 30rpx
	box-sizing border-box
	height 450rpx
	.idea
		width 100%
		height 100%
		padding 20rpx
		box-sizing border-box
		background-color rgba(244, 244, 244, 1)
.page_btn
	position absolute
	top 1200rpx
	right 30rpx
	left 30rpx
</style>
